<!DOCTYPE html>
<html>
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport"  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	    <title>我的订单</title>
	    <link rel="stylesheet" href="$!rc.contextPath/common/common.css" />
	    
	    <link rel="stylesheet" href="$!rc.contextPath/css/myorder.css">
	    <link rel="stylesheet" href="$!rc.contextPath/common/dropload.css" />
	    <style>
	    	.tab-list li {
			    padding: 0rem !important;
			}
	    </style>
	</head>
	<body>
	<div class="title text-center">
		<a onClick="javascript:window.history.go(-1)"><</a>
		我的订单
	</div>
	<ul class="tab-list">
		<li class="list-item choosed" onclick="f_init(0)">全部</li>
		<li class="list-item" onclick="f_init(1)">待付款</li>
		<li class="list-item" onclick="f_init(2)">待发货</li>
		<li class="list-item" onclick="f_init(3)">待收货</li>
		<li class="list-item" onclick="f_init(4)">已完成</li>
	</ul>
	<!--待付款-->
	<article>
	<div class="con floor2 content">
		<ul class="con-list block lists">
			
		</ul>
		<div class="href-bg">
			<div class="herf">
				<p class="herf-list-title">请选择取消订单的原因</p>
				<ul class="herf-list">
					#foreach ($reason in $!reasonList)
						#if($!reason.cancel_type == '1')
						<li val="$!reason.order_cancel_reason_id">
							<div>$!reason.cancel_content</div>
						</li>
						#end
					#end
				</ul>
				<div class="btn-cancle">取消</div>
			</div>
		</div>
		
		<div class="confirm-bg">	
			<div class="confirm">
				<p class="confirm-title">你确定要取消退款么?</p>
				<div>
					<div class="yes">确定</div>
					<div class="no">取消</div>
				</div>
			</div>
		</div>
	</div>
	</article>
	<!--待发货-->
	<!-- <div class="con">
		<ul class="con-list">
			<li class="con-item">
				<div class="store-name">
					<div>
						<p>浪花E族服装旗舰店</p>
					</div>
					<div class="state">
						买家已付款
					</div>
				</div>
				<div class="shops-detail">
					<div class="shops-avtar">
						<img src="../../../img/avtar1.jpg" alt="" />
					</div>
					<div class="shops-con">
						<div class="shops-left">
							<div class="shops-title">
								上衣夏季上衣夏季上衣夏季上衣夏季上衣夏季上衣夏季
							</div>
						</div>
						<div class="shops-right">
							<div class="new-price">¥39.90</div>
							<div class="old-price">¥49.90</div>
							<div class="count">×1</div>
						</div>
					</div>
				</div>
				<div class="total">
					<p>
						合计：
						<span class="total-price">
							¥39.90
						</span>
						(含运费¥0.00)
					</p>
				</div>
			</li>
		</ul>
	</div>
	待收货
	<div class="con">
		<ul class="con-list">
			<li class="con-item">
				<div class="store-name">
					<div>
						<p>浪花E族服装旗舰店</p>
					</div>
					<div class="state">
						卖家已发货
					</div>
				</div>
				<div class="shops-detail">
					<div class="shops-avtar">
						<img src="../../../img/avtar1.jpg" alt="" />
					</div>
					<div class="shops-con">
						<div class="shops-left">
							<div class="shops-title">
								上衣夏季上衣夏季上衣夏季上衣夏季上衣夏季上衣夏季
							</div>
						</div>
						<div class="shops-right">
							<div class="new-price">¥39.90</div>
							<div class="old-price">¥49.90</div>
							<div class="count">×1</div>
						</div>
					</div>
				</div>
				<div class="total">
					<p>
						合计：
						<span class="total-price">
							¥39.90
						</span>
						(含运费¥0.00)
					</p>
				</div>
				<div class="operate">
					<a class="take-goods" href="">
						确认收货
					</a>
				</div>
			</li>
		</ul>
	</div>
	待评价
	<div class="con">
		<ul class="con-list">
			<li class="con-item">
				<div class="store-name">
					<div>
						<p>浪花E族服装旗舰店</p>
					</div>
					<div class="state">
						买家未评价
					</div>
				</div>
				<div class="shops-detail">
					<div class="shops-avtar">
						<img src="../../../img/avtar1.jpg" alt="" />
					</div>
					<div class="shops-con">
						<div class="shops-left">
							<div class="shops-title">
								上衣夏季上衣夏季上衣夏季上衣夏季上衣夏季上衣夏季
							</div>
						</div>
						<div class="shops-right">
							<div class="new-price">¥39.90</div>
							<div class="old-price">¥49.90</div>
							<div class="count">×1</div>
						</div>
					</div>
				</div>
				<div class="total">
					<p>
						合计：
						<span class="total-price">
							¥39.90
						</span>
						(含运费¥0.00)
					</p>
				</div>
			</li>
		</ul>
	</div>
	退款
	<div class="con">
		<ul class="con-list">
			<li class="con-item">
				<div class="store-name">
					<div>
						<p>浪花E族服装旗舰店</p>
					</div>
					<div class="state">
						卖家未退款
					</div>
				</div>
				<div class="shops-detail">
					<div class="shops-avtar">
						<img src="../../../img/avtar1.jpg" alt="" />
					</div>
					<div class="shops-con">
						<div class="shops-left">
							<div class="shops-title">
								上衣夏季上衣夏季上衣夏季上衣夏季上衣夏季上衣夏季
							</div>
						</div>
						<div class="shops-right">
							<div class="new-price">¥39.90</div>
							<div class="old-price">¥49.90</div>
							<div class="count">×1</div>
						</div>
					</div>
				</div>
				<div class="total">
					<p>
						合计：
						<span class="total-price">
							¥39.90
						</span>
						(含运费¥0.00)
					</p>
				</div>
				<div class="operate">
					<div class="logistics refund">
						取消退款
					</div>
				</div>
			</li>
			<div class="confirm-bg">	
				<div class="confirm">
					<p class="confirm-title">你确定要取消退款么?</p>
					<div>
						<div class="yes">确定</div>
						<div class="no">取消</div>
					</div>
				</div>
			</div>
		</ul>
	</div> -->
	</body>
	<script src="$!rc.contextPath/common/jquery-1.8.3.min.js"></script>
	<script src="$!rc.contextPath/js/myorder.js"></script>
	<script src="$!rc.contextPath/common/dropload.min.js"></script>
	<script type="text/javascript">
	$(function(){
		f_init(0);
	})
	
	function f_init(orderState){
		$(".lists").empty();
		$(".dropload-down").remove();
		
		var counter = 0;
	    // 每页展示4个
	    var num = 5;
	    var pageStart = 0,pageEnd = 0;
	
	    // dropload
	    $('.content').dropload({
	        scrollArea : window,
	        domUp : {
	            domClass   : 'dropload-up',
	            domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
	            domUpdate  : '<div class="dropload-update">↑释放更新</div>',
	            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
	        },
	        domDown : {
	            domClass   : 'dropload-down',
	            domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
	            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
	            domNoData  : '<div class="dropload-noData">~没有更多订单了~</div>'
	        },
	        loadDownFn : function(me){
	            $.ajax({
	                type: 'POST',
	                url: '$!rc.contextPath/order/list',
	                data : {
	                	orderState : orderState,
	                	startIndex : pageStart,
	                	pageSize : num
	                },
	                dataType: 'json',
	                success: function(data){
	                    var result = '';
	                    counter++;
	                    pageEnd = num * counter;
	                    pageStart += num;
	                    if(data.code == '0'){
	                    	var list = data.data;
	                    	console.log(list);
	                    	for(var i = 0; i < list.length; i++){
	                    		var state;
	                    		if(list[i].order_state == '1'){
	                    			state = '待付款';
	                    		}else if(list[i].order_state == '2'){
	                    			state = '待发货';
	                    		}else if(list[i].order_state == '3'){
	                    			state = '待收货';
	                    		}else if(list[i].order_state == '4'){
	                    			state = '已完成';
	                    		}else if(list[i].order_state == '5'){
	                    			state = '已评价';
	                    		}else if(list[i].order_state == '6'){
	                    			state = '退款中';
	                    		}else if(list[i].order_state == '7'){
	                    			state = '已退款';
	                    		}
	                    		
		                        result += '<li class="con-item"><div class="store-name"><div><p>参境39度(' + list[i].store_name + ')</p></div><div class="state">' + state + '</div></div>';
		                        
		                        var skuList = list[i].skuList;
		                        for(var j = 0; j < skuList.length; j++){
		                        	result += '<div class="shops-detail" val="' + list[i].order_id + '" onclick="f_detail(this)"><div class="shops-avtar"><img src="http://app.tmaipay.com/' + skuList[j].attach_path + '" />' + 
		                        				'</div><div class="shops-con"><div class="shops-left"><div class="shops-title">' + skuList[j].sku_name + '</div></div><div class="shops-right">' + 
		                        				'<div class="new-price">¥' + skuList[j].sku_price + '</div><div class="old-price">¥' + skuList[j].old_price + '</div><div class="count">×' + skuList[j].sku_account + '</div>' + 
		                        				'</div></div></div>';
		                        }
		                        
		                        var pointStr = "";
		                        
		                        if(list[i].order_point > 0){
		                        	pointStr = "<span style=\"font-size: 12px;color: #828282;\">(积分抵扣" + list[i].order_point + "元)</span>";
		                        }
		                        
		                        result += '<div class="total"><p>合计：<span class="total-price">¥' + list[i].real_amount + ' ' + pointStr + '</span></p></div><div class="operate">';
		                        
		                        if(list[i].order_state == '1'){
		                        	result += '<div class="logistics cancle" val="' + list[i].order_id + '">取消订单</div><div class="take-goods" val="' + list[i].order_id + '" onclick="f_pay(this)">立即支付</div></div>';
		                        }else if(list[i].order_state == '2'){
		                        	
		                        }else if(list[i].order_state == '3'){
		                        	result += '<div class="operate"><a class="take-goods" val="' + list[i].order_id + '" onclick="f_take(this)">确认收货</a></div>';
		                        }/* else if(list[i].order_state == '4'){
		                        	result += '<div class="operate"><a class="take-goods" href="#">立即评价</a></div>';
		                        } */else if(list[i].order_state == '6'){
		                        	result += '<div class="operate"><div class="logistics refund">取消退款</div></div>';
		                        }
		                        
		                        result += '</li>';
		                        
	                    	}
	                    	
	                    	if(list.length < 5){
	                            // 再往下已经没有数据
	                            // 锁定
	                            me.lock();
	                            // 显示无数据
	                            me.noData();
	                            //break;
	                        }
	                    }
	
                        $('.lists').append(result);
                        // 每次数据加载完，必须重置
                        me.resetload();
                        
                      	f_loadevent();
	                },
	                error: function(xhr, type){
	                    alert('网络故障!');
	                    // 即使加载出错，也得重置
	                    me.resetload();
	                }
	            });
	        },
	        threshold : 50
	    });
	}
	
	function f_detail(obj){
		window.location.href = '$!rc.contextPath/orderView/detail?orderId=' + $(obj).attr("val");
	}
	
	var oid;
	
	function f_loadevent(){
		//弹出框取消订单
        $(".cancle").on("click",function(){
        	oid = $(this).attr("val");
        	$(".href-bg").fadeIn();
        })
        $(".herf-list li").on("click",function(){
        	f_cancel($(this).attr("val"))
        	$(".href-bg").fadeOut();
        })
        $(".btn-cancle").on("click",function(){
        	$(".href-bg").fadeOut();
        })
        //弹出框取消退款
        $(".refund").on("click",function(){
        	$(".confirm-bg").fadeIn();
        })
        $(".confirm>div>div").on("click",function(){
        	$(".confirm-bg").fadeOut();
        })
	}
	
	function f_cancel(reasonId){
		$.ajax({
            type: 'POST',
            url: '$!rc.contextPath/order/cancel',
            data : {
            	orderId : oid,
            	reasonId : reasonId
            },
            dataType: 'json',
            success: function(data){
                if(data.code == '0'){
                	location.reload();
                }
            }
        });
	}
	
	function f_pay(obj){
		window.location.href = '$!rc.contextPath/orderPay?orderId=' + $(obj).attr("val");
	}
	
	function f_take(obj){
		$.ajax({
            type: 'POST',
            url: '$!rc.contextPath/order/take',
            data : {
            	orderId : $(obj).attr("val")
            },
            dataType: 'json',
            success: function(data){
                if(data.code == '0'){
                	location.reload();
                }
            }
        });
	}
	</script>
</html>
